<template>
<div>
    <div class="app-wrap">
        <div class="withdrawal-title">提现至</div>
        <dl class="withdrawal-bank-list">
            <dd class="red">
                <div class="logo">
                    <!--<img src="img/bank/bank-1.png">-->
                    <img :src="imgSrc">
                </div>
                <div class="name">{{bankInfo.mBankName}}   储蓄卡（{{bankInfo.cardId}}）</div>
                <div class="num">**** **** **** {{bankInfo.cardId}}</div>
            </dd>
        </dl>
    </div>
    <div class="withdrawal-pop-up">    
        <div class="withdrawal-content pb-100">        
            <div class="title">
                <span class="t">提现金额</span>
                <div class="r">当前余额 <span class="orange">{{balance}}</span>元</div>
            </div>
            <div class="input-content">
                <div class="title">¥</div>
                <div class="input-box">
                    <input type="tel"  v-model="txMoney"  placeholder="输入提现金额">
                    <div class="clear-input">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-guanbi"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="prompt">实时到账</div>

            <a v-if="btnState == 3" class="btn btn-blue mt-20" href="javascript:void(0)">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dui1"></use>
                </svg>
                提现成功
            </a>
            <a v-if="btnState == 2" class="btn btn-blue mt-20" href="javascript:void(0)">
                <svg class="icon rotate" aria-hidden="true">
                    <use xlink:href="#icon-jiazai1"></use>
                </svg>
                正在提现
            </a>
            <a v-if="btnState == 1" @click="topUp" class="btn btn-blue mt-20" href="javascript:void(0);">
                提现
            </a>
            
        </div>   
        <div class="withdrawal-bg"></div>
    </div>
</div>   
</template>
<script>
    import $ from 'jquery'
    import fastClick from '@/assets/aip/js/fastclick'
    import AIP from '@/util/aip'
    import util from '@/util/util'
    import { Toast, MessageBox } from 'mint-ui'
    import {mapGetters} from 'vuex';
    import {encrypt} from '@/util/encryptPassword'

    export default {
        name: "takeCash",
        data(){
            return {
                txMoney:'',
                password:'',
                btnState:'1',
                visibleState:'1',
                imgSrc: '',
                bankInfo: {}
            }
        },methods:{
            getV(){
                this.btnState = 2
                this.passWord = encrypt($("#passWordInput").val(),this.key);
                util.axiosPost('/eebpc/Money/TakeCashMoney', 
                    {
                        txMoney: this.txMoney,
                        password: this.passWord
                    }
                )
                .then( response => {
                    console.log(this.txMoney);
                    console.log(this.passWord);
                    console.log(response);
                    console.log('1');
                    if(util.isValidate(response)){
                        if(response.data.state == 1){
                            console.log('--成功--')
                            this.btnState = 3
                            // MessageBox.alert('提现成功!','提示').then(action => {
                            // this.$router.push({path:'/transactionDetail'});
                            // });
                            setTimeout(()=>{
                                this.$router.push({path:'/transactionDetail'});
                            }, 3000)
                        }else if(response.data.state == 3){
                            console.log('--请求提交成功--')
                            this.btnState = 3
                            MessageBox.alert('额度超过阈值，人工审核中，请耐心等待','提示').then(action => {
                            this.$router.push({path:'/transactionDetail'});
                            });
                        }
                    }else{
                        console.log('--异常--')
                        this.btnState = 1;
                        this.txMoney = "";
                        console.log('--按钮恢复--')

                    }
                });
            },
            getF(){
                Toast({
                    message:'找回密码!'
                });
                //this.$router.push({path:'/'});
            },
            topUp(){
                var exp = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;
                if(exp.test(this.txMoney)){
                    if(Number(this.txMoney)>Number(this.balance)){
                        Toast({
                            message:'活期余额不足，剩余金额'+Number(this.balance)+'元'
                        });
                        return false;
                    }
                    AIP.addKeyboardPayPassword(this.txMoney, {callback:this.getV, forgot:this.getF})
                }
                else{
                    Toast({
                        message:'金额有误!'
                    });
                }
            },
            getBankInfo(){
                util.axiosPost('/eebpc/queryBank/queryBankNameAndMoney')
                .then( res => {
                    console.log(res)
                    this.bankInfo = res.data;
                    this.imgSrc = require('@/assets/img/bank/'+ this.bankInfo.name +'.png')
                    this.bankInfo.cardId = res.data.cardId.substring(res.data.cardId.length-4);
                })
            },
            //表单校验
//            validateForm(){
//                let rules = {
//                    txMoney:[{isNull:true,message:'金额不能为空!'},{isNum:true,message:'金额只能是数字!'}],
//                    password:[{isNull:true,message:'密码不能为空!'}]
//                }
//                let rs = util.validateForm(this.cashFormData,rules);
//                if(rs.hasNull){
//                    this.$message({message:rs.info,type:'error'});
//                    return false;
//                }
//                if(Number(this.cashFormData.txMoney)>Number(this.balance)){
//                    this.$message({message:`活期余额不足，剩余金额${Number(this.balance)}元`,type:'error'});
//                    return false;
//                }
//               return true;
//            }
            //提现
//            takeCashSubmit(){
//                if(this.validateForm()){
//                    this.cashFormData.password = encrypt(this.cashFormData.password,this.key);//密码加密
//                    //个人提现，状态1 表示成功,3：提现限额超限，表示大额审核中
//                    this.$store.dispatch('takeCashMoney',this.cashFormData).then(resp=>{
//                        console.log(resp.data);
//                        let param = {title:'提现结果',state:false,content:'提现失败!'};
//                        if(Number(resp.data.state)==1) {
//                            param = {title:'提现结果',state:true,content:'提现成功!'};
//                        }else if(Number(resp.data.state)==3){
//                            param = {title:'提现结果',state:true,content:'提现额度较大,需要管理员审核,审核通过后<br/>将自动转至您的银行账户,请注意查收'};
//                        }
//                        this.$store.commit('setResultPageData',param);
//                        this.$router.push({path:'/commonResult'});
//                    });                                                                                                                     
//                }
//            }
        },
        created(){
            this.$store.dispatch('getKey',{});
            this.$store.dispatch('queryBalance',{});
            this.getBankInfo();
        },
        computed:{
            ...mapGetters({
                balance:'getBalance',
                key:'getKey'
            })
        }
    }
</script>

<style scoped>

</style>
